<template>
    <a-card title="维修服务统计">
        <div class="repair-tongji-box">
            <!-- 工单处理情况 -->
            <div class="box">
                <div class="box-title">
                    <span class="title">工单处理情况</span>
                    <span class="sub-title">（本年）</span>
                </div>
                <div class="box-info">
                    <a-row class="gdclqk">
                        <a-col :span="8">
                            <div class="num n1" v-if="tjdata.data01">{{tjdata.data01[0].size_num}}</div>
                            <div class="txt">工单总数</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="num n2" v-if="tjdata.data01">{{tjdata.data02[0].size_num}}</div>
                            <div class="txt">已维修</div>
                        </a-col>
                        <a-col :span="8">
                            <div class="num n3" v-if="tjdata.data01">{{tjdata.data01[0].size_num - tjdata.data02[0].size_num}}</div>
                            <div class="txt">维修中</div>
                        </a-col>
                    </a-row>
                </div>
            </div>
            <!-- 维修单位报修量 -->
            <div class="box">
                <div class="box-title">
                    <span class="title">维修单位报修量</span>
                    <span class="sub-title">（本年）</span>
                </div>
                <div class="box-info bottom-border">
                    <RepairSort cname="单位" :items="repairCount.deptCounts" />
                </div>
            </div>
            <!-- 维修单位工单处理量排行 -->
            <!-- <div class="box">
                <div class="box-title">
                    <span class="title">维修单位工单处理量</span>
                    <span class="sub-title">（本年）</span>
                </div>
                <div class="box-info bottom-border">
                    <RepairSort cname="单位" :items="repairCount.delCounts" />
                </div>
            </div> -->
            <!-- 报修量排名（按保修区域） -->
            <div class="box">
                <div class="box-title">
                    <span class="title">区域报修量</span>
                    <span class="sub-title">（本年）</span>
                </div>
                <div class="box-info bottom-border">
                    <RepairSort cname="区域" :items="repairCount.areaCounts" />
                </div>
            </div>
            <!-- 报修量排名（按保修项目） -->
            <div class="box">
                <div class="box-title">
                    <span class="title">项目报修量排名</span>
                    <span class="sub-title">（本年）</span>
                </div>
                <div class="box-info">
                    <RepairSort cname="项目" :items="repairCount.projetCounts" />
                </div>
            </div>
        </div>
    </a-card>
</template>
<script setup>
import { computed, ref, onMounted, reactive, watch } from 'vue';
import RepairSort from '@/views/open-info/components/repair-sort.vue';

const props = defineProps({
    tjdata: {
        type: Object,
        default: {},
    }
});

// 维修单位报修量
const repairCount = reactive({
    deptCounts: [],
    delCounts: [],
    areaCounts: [],
    projetCounts: []
});
//维修单位报修量
function initRepairDeptCount() {
    if(!props.tjdata.data04){
        repairCount.deptCounts = [];
        return;
    }
    let data = [];
    props.tjdata.data04.forEach(element => {
        data.push({
            name:element.rep_u_name,
            count:element.size_num
        });
    }); 
    repairCount.deptCounts = data;
}
function initDelDeptCount() {
    var data = [
        {
            name: '动力服务中心雁塔',
            count: '166'
        },
        {
            name: '校网络管理部',
            count: '143'
        }, {
            name: '长安维修服务部',
            count: '100'
        }, {
            name: '翡翠湖校区新一食堂',
            count: '66'
        }, {
            name: '动力处',
            count: '13'
        }
    ]
    repairCount.delCounts = data;
}
//区域报修量排名
function initAreaCount() {
    if(!props.tjdata.data05){
        repairCount.areaCounts = [];
        return;
    }
    let data = [];
    props.tjdata.data05.forEach(element => {
        data.push({
            name:element.rep_a_name,
            count:element.size_num
        });
    }); 
    repairCount.areaCounts = data;
};
function initProjectCount() {
    if(!props.tjdata.data06){
        repairCount.projetCounts = [];
        return;
    }
    let data = [];
    props.tjdata.data06.forEach(element => {
        data.push({
            name:element.rep_i_name,
            count:element.size_num
        });
    });  
    repairCount.projetCounts = data;
};
watch(
    () => props.tjdata,
    () => {
        initRepairDeptCount();
        initDelDeptCount();
        initAreaCount();
        initProjectCount();
    },
    {
        immediate: true,
    }
);
// onMounted(() => {
  
// });



</script>
<style lang="less" scoped>
.repair-tongji-box {
    .box {
        .box-title {
            .title {
                color: #1D2129;
                font-weight: 700;
                font-size: 12px;
            }

            .sub-title {
                font-size: 12px;
                color: #86909C;
            }
        }

        .box-info {
            text-align: center;
            margin: 16px 0 16px;
            padding-bottom: 16px;

            &.bottom-border {
                border-bottom: 1px dotted #E5E6EB;
            }
        }
    }

    .gdclqk {
        .num {
            font-size: 24px;
            font-weight: 700;

            &.n1 {
                color: #165DFF;
            }

            &.n2 {
                color: #07C160;
            }

            &.n3 {
                color: #F77234;
            }
        }

        .txt {
            font-size: 12px;
            color: #4E5969;
        }
    }
}
</style>